<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>

</head>
<body>


<div id="app">

    <input type="text" v-model="num1"> {{num1}}
    <div v-for="emp in employees">
        {{emp.name}}-{{emp.salary}}
    </div>
    <hr>
    <div>
        总工资1:{{
            getTotal()}}
    </div>

        <div>
            总工资2:{{total}}
        </div>

        <div>
            平均工资 ： {{avg}}
        </div>

</div>
</body>
<script src="../../lib/vue.global.js"></script>
<script>

    var app = Vue.createApp({
        data: function () {

            return {
                employees: [
                    {
                        id: 1,
                        name: 'L',
                        salary: 3000
                    }, {
                        id: 2,
                        name: 'M',
                        salary: 9000
                    }, {
                        id: 3,
                        name: 'N',
                        salary: 6000
                    }
                ], counter1: 0, num1: 90
            }
        }, methods: {
            getTotal: function () {


                return 1;
            }
        }, computed: {
            total: function () {
                this.counter1+=1;
                return this.employees.reduce(function (total, curr) {
                    return total + curr.salary;
                }, 0)
            },
            avg:function (){
                return this.employees.reduce(function (total, curr) {
                    return total + curr.salary;
                }, 0) / this.employees.length;
            }
        }
    });

    app.mount('#app');

</script>
</html>